<template>
    <section>
        <el-row>
            <el-col :span="24">
                <div class="right">
                    <h2 class="content" style="line-height:20px;">{{mylab}}(您的课程：
                        <span style="color:red">{{kecheng }}</span>)
                    </h2>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="7">
                <div class="tree">
                    <div class="right">全部章节</div>
                    <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
                </div>
            </el-col>

            <el-col :span="10">
                <div class="right">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="添加章节(节点)" name="first">
                            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                                <el-form-item label="请选择父章节：">
                                    <el-select v-model="value" placeholder="请选择" size="150px">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="新节点名称：" prop="context">
                                    <el-input v-model="form.context" placeholder="请输入内容"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                                </el-form-item>
                            </el-form>

                        </el-tab-pane>
                        <el-tab-pane label="修改章节(节点)" name="second">
                            <el-form ref="form" :model="form" label-width="120px">
                                <el-form-item label="请选择章节：">
                                    <el-cascader :options="options2" v-model="selectedOptions2"
                                                 :show-all-levels="true"
                                                 :change-on-select="true" size="150px"></el-cascader>
                                </el-form-item>
                                <el-form-item label="新节点名称：">
                                    <el-input v-model="form.context" placeholder="请输入内容"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click.native="modifyClass">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="删除章节" name="third">
                            <el-form ref="form" :model="form" label-width="120px">
                                <el-form-item label="请选择章节：">
                                    <el-cascader :options="options2" v-model="selectedOptions3"
                                                 :change-on-select="true" size="150px">
                                    </el-cascader>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click.native="deleteSection">删除此章节</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>


                        <el-tab-pane label="上传视频" name="fource">

                            <el-form ref="form" :model="form" label-width="120px">
                                <el-form-item label="请选择章节：">
                                    <el-cascader :options="options2" v-model="selectedOptions3"
                                                 @change="handleChange" size="150px">
                                    </el-cascader>
                                </el-form-item>

                                <!--<el-upload class="upload-demo" drag action="api/teacher/sectionManager/videoUpLoad"-->
                                <!--ref="upload"-->
                                <!--:multiple="false"-->
                                <!--accept="audio/mp4,video/mp4"-->
                                <!--:data="aa"-->
                                <!--:auto-upload="false">-->
                                <!--<i class="el-icon-upload"></i>-->
                                <!--<div class="el-upload__text">将文件1561661拖到此处，或<em>点击上传</em></div>-->
                                <!--<div class="el-upload__text">只能上传mp4格式的视频文件</div>-->
                                <!--</el-upload>-->

                                <el-form-item label="上传：">
                                    <my-upload buttonName="选择文件上传" @selectedFile="selectedFile"
                                               accept="audio/mp4,video/mp4"></my-upload>
                                    <el-tag :type="file.type">{{file.fileName}}</el-tag>
                                    <br/>
                                    <el-tag type="success">注意：只能上传mp4格式的视频文件。</el-tag>
                                    <el-tag type="success">如果此章节已上传视频，将会覆盖原有视频。</el-tag>
                                    <el-progress :text-inside="true" :stroke-width="18"
                                                 :percentage="percentage"></el-progress>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click.native="upvideo">确认上传</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>


            <el-col :span="7">
                <div class="tree">
                    <div class="right">未录入视频的章节</div>
                    <el-tree :data="dataOfNovideo" @node-click="handleNodeClick"></el-tree>
                </div>
            </el-col>
        </el-row>
    </section>
</template>
<script>
    import {
        getTreeList,
        addNewClass,
        modifyOneClass,
        deleteOneSection,
        videoUpLoad,
        getTreeListOfNoVideo
    } from '../../api/api';
    import myUpload from './public/myUpload.vue';
    export default {
        components: {myUpload},
        data() {
            return {
                mylab: '欢迎来到章节管理模块',
                kecheng: '',
                lunbo: true,
                data: [],
                dataOfNovideo: [],
                aa: {sectionId: ''},
                value: 0,
                form: {
                    context: '',
                },
                rules: {
                    context: [
                        {required: true, message: '请输入新节点名称', trigger: 'blur'},
                    ],
                },
                options: [{
                    label: '一级章节',
                    value: 0,
                    children: [],
                }],
                options2: [],
                activeName: 'first',
                selectedOptions: [],
                selectedOptions2: [],
                selectedOptions3: [],
                file: {
                    type: '',
                    fileName: '',
                    fileData: ''
                },
                percentage: 0 //进度条百分比
            };

        },
        watch: {
            activeName: function (an) {
                if (an == 'fource') {//上传文件的选项卡选中
                    this.file.type = 'primary';
                    this.file.fileName = '未选择任何视频文件';
                    this.file.fileData = '';
                    this.percentage=0;
                }
            }
        },
        mounted() {
            this.initDetail();
        },

        methods: {
            initDetail(){
                getTreeListOfNoVideo().then(res => {
                    var tree = res.resData;
                    this.dataOfNovideo = tree;
                });
                getTreeList().then(res => {
                    // 首先个课程赋值
                    this.kecheng = res.resData.className;
                    //判断从后台所获取的数据是否为空
                    var tree = res.resData.list;
                    this.data = tree;
                    this.options2=[];//必须初始为空，否则删除的节点不移除
                    if (this.data.length === 0) {
                        //为空时提示用户添加章节
                        this.mylab = "暂无章节，请添加";
                        this.lunbo = false;
                    } else {
                        //遍历菜单，添加到下拉框
                        for (var index in tree) {
                            //定义一个变量，用来接收
                            var tree_temp = tree[index];
                            var temp = {
                                label: tree_temp.label,
                                value: tree_temp.id - 0,
                                children: [],
                            };
                            //遍历所有子节点
                            if (tree_temp.children) {
                                for (var childindex in tree_temp.children) {
                                    //存储子节点数据
                                    var child_temp = tree_temp.children[childindex];
                                    var tempChild = {
                                        label: child_temp.label,
                                        value: child_temp.id - 0,
                                    };
                                    //temp.children[childindex] = tempChild;
                                    temp.children.splice(childindex,1,tempChild);//使用此方法使得vue重新渲染。
                                }
                            }
                            //var newIndex = index - 0 + 1;
                            this.options.splice(index,1,temp);
                            //this.options2[index - 0] = temp;
                            //var o2=index - 0;
                            this.options2.splice(index,1,temp);

                        }
                    }
                });
                this.file.type = 'primary';
                this.file.fileName = '未选择任何视频文件';
                this.file.fileData = '';
                this.percentage=0;
            },


            handleNodeClick(data) {
                this.lunbo = false;
            },
            //添加
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var newclass = {section: this.value, knot: this.form.context};
                        addNewClass(newclass).then(res => {
                            if (res.resCode == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                                this.initDetail();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },

            // 修改
            modifyClass(){

                this.$refs.form.validate((valid) => {
                    if (valid) {
                        var modify = {section: this.selectedOptions2, newclassname: this.form.context};
                        // alert(modify.section);
                        modifyOneClass(modify).then(res => {
                            if (res.resCode == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                                this.initDetail();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败'
                                });
                            }

                        });

                    } else {
                        return false;
                    }
                });
            },

            // 删除章节
            deleteSection(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        var deleteSection = {section: this.selectedOptions3};
                        deleteOneSection(deleteSection).then(res => {
                            if (res.resCode == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                });
                                this.initDetail();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            handleChange(){
                var sectId = this.selectedOptions3;
                this.aa.sectionId = sectId;
            },

            //视频上传
            /**
             * 选取的文件 参数为文件句柄
             */
            selectedFile(file){
                this.file.fileName = file.name;
                this.file.type = "success";
                this.file.fileData = file;
            },
            upvideo(){
                if (this.aa.sectionId == '') {
                    this.$message({
                        type: 'error',
                        message: '章节必须选取'
                    });
                } else if(this.file.fileData==''){
                    this.$message({
                        type: 'error',
                        message: '未选择文件'
                    });
                }
                else {
                    //this.$refs.upload.submit();
                    let formData = new FormData();
                    formData.append("sectionId", this.aa.sectionId);
                    formData.append("file", this.file.fileData);
                    let tempThis=this; //回调函数中无法获取this对象
                    videoUpLoad(formData, function (event) {
                        let a = event.total; //上传文件的总字节数，
                        let b = event.loaded; //当前上传的字节数
                        tempThis.percentage= Math.round((b/a)*100);
                    }).then(res => {
                        if (res.resCode == 0) {
                            this.$message({
                                type: 'success',
                                message: '上传视频成功'
                            });

                            this.initDetail();
                        }
                        else {
                            this.$message({
                                type: 'error',
                                message: '上传失败了'
                            });
                        }
                    });
                }
            }


        }
    };
</script>
<style>
    .all {
        width: 100%;
        margin-top: 20px;
    }

    .tree {
        /*width: 25%;*/
        /*float: left;*/
        /*padding: 3px;*/
        padding: 5px;
    }

    .right {
        /*width: 74%;*/
        border: 1px solid #ccc;
        /*float: left;*/
        /*text-align: center;*/
        padding: 5px;
    }

    .el-carousel__item h3 {
        color: white;
        font-size: 18px;
        opacity: 0.9;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #1D8CE0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #13CE66;
    }

    .motify {
        width: 73%;
        margin-top: 20px;
        border: 1px solid #1D8CE0;
        padding: 10px;
        float: left;
        text-align: left;
    }
</style>
